/**
 * 〈所属模块〉
 * 〈功能描述〉
 *
 * @author Lcs
 * @date 2017/9/15 13:27
 */

import React, { Component } from "react";
import {
  StyleSheet, Text, View, Image, TextInput,
} from "react-native";
import { connect } from "react-redux"; // 引入connect函数
import * as quickOrderAction from "../actions/quickOrderAction"; // 导入action方法
import {
  Color, ScreenWidth, FontSize, scale,
} from "../common";
import NavigatorUtil from "../utils/NavigatorUtil";
import BasePage from "../widget/common/BasePage";
import Button from "../widget/common/NCButton";

class QuickOrder extends Component {
  componentWillUnmount() {
    const { props } = this;
    props.dispatch(quickOrderAction.unmount());
  }

  handleClick = () => {
    const { props } = this;
    const { quickOrderReducer } = props;
    const { realName, mobile, area } = quickOrderReducer;
    props.dispatch(
      quickOrderAction.quickOrder(realName, mobile, area, res => {
        setTimeout(() => NavigatorUtil.goBack(), 1000);
      }),
    );
  };

  render() {
    const { props } = this;
    const { quickOrderReducer } = props;
    const {
      realName, mobile, area, loading,
    } = quickOrderReducer;

    return (
      <BasePage style={styles.container} showLoading={loading}>
        <View style={styles.itemRow}>
          <Text style={styles.textKey}>联系人</Text>
          <TextInput
            value={realName}
            onChangeText={text => props.dispatch(quickOrderAction.inputName(text))}
            maxLength={10}
            style={styles.input}
            underlineColorAndroid={Color.transparent}
            placeholder="请输入联系人姓名"
            enablesReturnKeyAutomatically={false}
            placeholderTextColor={Color.text_assist}
          />
          <Image source={require("../img/ic_addresslist.png")} style={styles.imgIcon} />
        </View>
        <View style={styles.divider} />
        <View style={styles.itemRow}>
          <Text style={styles.textKey}>手机号</Text>
          <TextInput
            value={mobile}
            onChangeText={text => props.dispatch(quickOrderAction.inputMobile(text))}
            maxLength={20}
            keyboardType="numeric"
            style={styles.input}
            underlineColorAndroid={Color.transparent}
            placeholder="请输入联系人手机号"
            enablesReturnKeyAutomatically={false}
            placeholderTextColor={Color.text_assist}
          />
        </View>
        <View style={styles.divider} />
        <View style={styles.itemRow}>
          <Text style={styles.textKey}>详细地址</Text>
          <TextInput
            value={area}
            onChangeText={text => props.dispatch(quickOrderAction.inputAddress(text))}
            maxLength={30}
            style={styles.input}
            underlineColorAndroid={Color.transparent}
            placeholder="请输入详细地址"
            enablesReturnKeyAutomatically={false}
            placeholderTextColor={Color.text_assist}
          />
          <Image source={require("../img/ic_location.png")} style={styles.imgIcon} />
        </View>
        <View style={styles.divider} />
        <Button
          onPress={this.handleClick}
          buttonStyle={styles.btnContainer}
          textStyle={styles.btnText}
          title="立即预约"
        />
      </BasePage>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Color.white,
    alignItems: "center",
    paddingTop: scale * 16,
  },
  itemRow: {
    height: scale * 48,
    width: ScreenWidth,
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 16 * scale,
  },
  subRowConatiner: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
  },
  divider: {
    height: StyleSheet.hairlineWidth,
    width: ScreenWidth - scale * 32,
    backgroundColor: Color.devider,
    marginLeft: scale * 16,
  },
  textKey: {
    fontSize: FontSize.SIZE_14,
    color: Color.text_desc,
  },
  btnContainer: {
    marginTop: scale * 32,
    height: 44 * scale,
    width: ScreenWidth - scale * 64,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Color.tab_yellow,
    borderWidth: 0,
    alignSelf: "center",
  },
  btnText: {
    fontSize: FontSize.SIZE_17,
    color: Color.text_title,
  },
  input: {
    flex: 1,
    marginLeft: scale * 30,
    marginRight: scale * 30,
    color: Color.text_title,
    fontSize: FontSize.SIZE_14,
    paddingTop: 0,
    paddingBottom: 0,
  },
  inputAreaContainer: {
    width: ScreenWidth - scale * 32,
    height: scale * 70,
    paddingHorizontal: 16 * scale,
    paddingVertical: 14 * scale,
    backgroundColor: Color.background_native,
  },
  inputDetail: {
    flex: 1,
    color: Color.text_title,
    fontSize: FontSize.SIZE_12,
  },
  imgIcon: {
    width: scale * 24,
    height: scale * 24,
  },
  rowSwitch: {
    height: scale * 44,
    justifyContent: "space-between",
    width: ScreenWidth,
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 16 * scale,
  },
});

const reducers = state => {
  return {
    quickOrderReducer: state.quickOrderReducer,
  };
};

export default connect(reducers)(QuickOrder);
